<template>
    <div>
        <div>
            <el-select v-model="queryParams.selectSorcesId" clearable @change="changeselectsources">
                <el-option :value="item.id" :label="item.database" v-for="item in datasources"></el-option>

            </el-select>
        </div>

        <el-table :data="tableList">

            <el-table-column label="描名称">
                <template #default="scope">
                    <div>
                        {{ scope.row.tableName }}
                    </div>
                </template>

            </el-table-column>


            <el-table-column label="操作">
                <template #default="scope">
                    <div>
                        <el-button type='text' @click="() => triggergemeratedialog(scope.row)">生成代码</el-button>
                    </div>
                </template>

            </el-table-column>
        </el-table>
    </div>
</template>
<script setup lang="ts">
import { find, map as lodashmap } from 'lodash-es'
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { DataSouirces } from '../../types/DataSouirces.d';
import { ResposenUtils } from '../../types/resposenUtils.d';

import FormDialog from '../../components/FormDialog/index'


type tableItemType = {
    tableName: String
}
const tableList = ref<tableItemType[]>()
type QueryParamsType = {
    selectSorcesId: string
}
const datasources = ref<DataSouirces[]>()
async function init_datasource() {
    var listresult = await axios.get<ResposenUtils<DataSouirces[]>>("/api/api/databaseui/getdatasourceoptions").then(res => res.data)
    console.log('listresult :', listresult?.data);
    var list = listresult?.data || []
    datasources.value = list

}
const datasourceDto_select = ref()
const queryParams = ref<QueryParamsType>({ selectSorcesId: '' })

async function changeselectsources(selectvalue: string) {
    console.log('selectvalue :', selectvalue);
    //开始初始化获取tables
    var datasourceDto = find<DataSouirces>(datasources.value, item => item.id == parseInt(selectvalue))
    console.log('datasourceDto :', datasourceDto);
    datasourceDto_select.value=datasourceDto
    var result = await axios.post<ResposenUtils<String[]>>('/api/api/databaseui/gettablenames', {
        datasourceDto: datasourceDto,

    }).then(res => res.data);
    console.log('result :', result);


    tableList.value = lodashmap(result?.data || [], item => {
        return {
            tableName: item
        }
    }) as any as tableItemType[];

    console.log('tableList.value :', tableList.value);


}

//#regoin 生产代码 弹出框
function triggergemeratedialog(row) {
    FormDialog({
        title: '生产代码',
        data() {
            return {
                datasourceDto:datasourceDto_select.value,
                tableName: row?.tableName
            }
        },
        components: {
            modify: () => import('./modify.vue')
        }
    })
}
//#endregoin

onMounted(() => {
    init_datasource()
})
</script>